<!--设备管理-->
<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="tiktok-title">爆客机管理</div>
      <div class="flex-align-center">
        <div v-for="(i,j) in typeList" :key="j" :class="typeIndex == j ? 'sel-title-class' : 'title-class'" class="default" @click="typeClick(j)">{{i.name}}</div>
      </div>
    </el-card>
    <el-card shadow="never">
      <el-row>
        <div class="flex-wrap">
<!--          v-for="(i,j) in list" :key="j"-->
            <el-col v-for="(i,j) in list" :key="j" :xs="12" :md="12" :lg="8">
              <div class="flex-align-center equipment-content">
                <img />
                <div class="flex-columns right flex1">
                  <div class="m-btn">爆客机名称：{{i.equipmentName}}</div>
                  <div class="m-btn">爆客机编号:{{i.equipmentCode}}</div>
                  <div class="flex-between">
                    <!-- /使用中-->
                    <div class="flex" :class="i.equipmentStatus==1?'noUse':'inUse'">{{i.equipmentStatus==1?'闲置中':'使用中'}}</div>
                    <el-popover
                      placement="right"
                      width="400"
                      trigger="click">
                      <el-card>
                        <div class="card-content">
                          <div><span>活动名称</span>{{i.activityName || '暂无活动'}}</div>
                          <div v-if="i.activityName"><span>开始时间</span>{{i.createTime}}</div>
                        </div>
                      </el-card>
                      <!--                  <el-button slot="reference">hover 激活</el-button>-->
                      <div class="colorA1" slot="reference" v-if="i.equipmentStatus==2">查看活动 ></div>
                    </el-popover>
                  </div>
                </div>
              </div>
            </el-col>
          </div>
        <div v-if="list.length<=0" class="flex-column m-margin15">暂无爆客机</div>
      </el-row>
    </el-card>
<!--    <el-button @click="switchClick">{{ switchInfo==false ? '开启爆客机' : '关闭爆客机' }}</el-button>-->
  </div>
</template>

<script>
  import {equipmentQuery,equipmentOpen,equipmentClose} from "@/api/explosiveCode/equipmentManage";
  export default {
    name: "index",
    data(){
      return{
        switchInfo:false,
        list:[],
        initInfo:{
          merchantId: this.$store.state.user.info.merchantId // 商户id
        },
        typeIndex:0,
        // 1. 闲置中   2.使用中
        typeList: [
          {
            name:'闲置中',
            id:1
          },
          {
            name:'使用中',
            id:2
          }
        ],
      }
    },
    created(){
      this.init()
    },
    methods:{
      switchClick(){
        if(this.switchInfo==true){
          this.equipmentOpens()
        }
        else{
          this.equipmentOpens()
        }
      },
      init(){
        this.initInfo.equipmentStatus=this.typeList[this.typeIndex].id
        //查询设备
        equipmentQuery(this.initInfo)
          .then((data) => {
            this.list=data.data
            console.log("查询设备--data=======",data)
          })
          .catch((e) => {
            this.$message.error(e);
          });

      },
      // 开启设备
      equipmentOpens(){
        equipmentOpen()
          .then((data) => {
            this.switchInfo = !this.switchInfo
            this.list=data.data
            console.log("开启设备--data=======",data)
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },

      // 关闭设备
      equipmentCloses(){
        equipmentClose()
          .then((data) => {
            this.switchInfo = !this.switchInfo
            this.list=data.data
            console.log("关闭设备--data=======",data)
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },


      // 类型（1.闲置中 2.使用中）
      typeClick(e){
        this.typeIndex=e;
        this.init()
      },
    }
  }
</script>

<style scoped lang="less">
  .tiktok-title{
    padding: 5px 0 30px;
    font-size: 20px;
    color: #000000;
  }
  .title-class,.sel-title-class{
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 21px;
    width: 114px;
    height: 35px;
    border-radius: 5px;
  }
  .title-class{
    color: #757575;
    background: #FAFAFC;
  }
  .sel-title-class{
    color: #1E6CEB;
    background: #DDF0FF;
  }
  @media screen and (min-width: 700px) {
    .set-width {
      width: calc(100%/2);
    }
  }
  @media screen and (min-width: 1055px) {
    .set-width {
      width: calc(100%/3);
    }
  }
  @media screen and (min-width: 1400px) {
    .set-width {
      width: calc(100%/4);
    }
  }
  .equipment-content{
    margin-left: 5px;
    margin-top: 19px;
    padding: 17px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    width: 355px;
    /*height: 149px;*/
    img{
      background: #F5F5F5;
      border-radius: 5px;
      width: 103px;
      height: 103px;
    }
    .right{
      margin-left: 20px;
      .m-btn{
        margin-bottom: 20px;
      }
      .noUse,.inUse{
        border-radius: 100px;
        width: 65px;
        height: 27px;
        font-size: 12px;
        background: #F5F5F5;
        color: #A1A1A1;
      }
      .inUse{
        background: #DDF0FF;
        color: #1E6CEB;
      }

    }
  }

  /* 嵌套卡片 css */
  .card-content{
    div{
      color: #a1a1a1;
      span{
        margin-right: 18px;
      }
    }
    div:first-child{
      margin-bottom: 20px;
    }
  }
</style>
